<?php 
	
	//步骤分析：
	//1 观察了一下数据的结构
	//2 进行静态页面处理
	//3 使用php读取json文件的内容并进行转换
		

	//4 进行页面结构的创建并修改对应内容
	//见html中。


 ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页-音乐列表</title>
	<link rel="stylesheet" href="static/css/bootstrap.css">
</head>
<body>
	<?php
		require_once 'nav.php';
	?>
	<div class="container body">
		<h1 class="text-center display-3 py-3">音乐列表</h1>
		<hr>
		<a href="./upload.php" class="btn btn-dark">新增歌曲信息</a>
		<table class="table table-bordered">
			<thead class="thead-inverse">
				<tr>
					<th>标题</th>
					<th>歌手</th>
					<th>专辑</th>
					<th>音乐</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
					<tr>
						<td>李四之歌</td>
						<td>李四</td>
						<td>李四的音乐世界</td>
						<td><audio src="upload/lisi.mp3" controls=""></audio></td>
						<td>
							<!-- 
								编辑功能：
									设置一个编辑按钮；
									设置href的值，并且传递id给编辑页面进行处理。
							 -->
							<a href="./edit.php?id=3" class="btn btn-primary">编辑</a>
							<!-- 
								删除功能：
								 需要让a标签点击后跳转到删除页面，并且使用get方式传递参数id
							 -->
							<a href="./delete.php?id=3" class="btn btn-danger">删除</a>
						</td>
					</tr>

					<tr>
						<td>王五之歌1111</td>
						<td>王五1</td>
						<td>王五的音乐宇宙123</td>
						<td><audio src="upload/lisi.mp3" controls=""></audio></td>
						<td>
							<!-- 
								编辑功能：
									设置一个编辑按钮；
									设置href的值，并且传递id给编辑页面进行处理。
							 -->
							<a href="./edit.php?id=3" class="btn btn-primary">编辑</a>
							<!-- 
								删除功能：
								 需要让a标签点击后跳转到删除页面，并且使用get方式传递参数id
							 -->
							<a href="./delete.php?id=3" class="btn btn-danger">删除</a>
						</td>
					</tr>
			</tbody>
		</table>
	</div>

<?php
	require_once 'footer.php';
?>	
</body>
</html>